<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机构列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">仓库管理</a>
</h3>
<div id="app">
        <template>
            <el-form :inline="true" class="demo-form-inline" size="mini">
            <el-select v-model="iom"
                       multiple
                       filterable
                       allow-create
                       default-first-option
                       placeholder="请选择文章标签">
            <el-option
                    v-for="item in ioms"
                    :key="item.iom"
                    :label="item.wareName"
                    :value="item.wareName">
            </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="save()">查询</el-button>
            </el-form>
    </template>
        <template>
        <el-table style="width: 100%"
                  :data="ioms"
                  ref="siteTable">
            <el-table-column label="商品编号" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tIomWarehouses.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tIomWarehouses.iomGoods }}</span>
                </template>
            </el-table-column>
            <el-table-column label="仓库编号" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareNo }}</span>
                </template>
            </el-table-column>
            <el-table-column label="负责人" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="批次" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tIoWarehouses.batch }}</span>
                </template>
            </el-table-column>
            <el-table-column label="数量" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tIoWarehouses.pNum }}</span>
                </template>
            </el-table-column>
            <el-table-column label="现有数量" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tIoWarehouses.pNum }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-popconfirm icon-color="red" title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
                        <el-button size="mini" icon="el-icon-delete" type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>


    </template>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 当前页数
                currentPage: 1,
                // 订单总数
                count: 0,
                // 每页的数据
                page_size: [6, 3],
                // 当前每页的数据
                pageSize: 6,
                // 分页背景
                back: true,
                ioms: [],
                iom: {},
                // 货区创建日期
                date: null,
                dialogFormVisible: false,
                flag: 0,
                search:{},
                tableData:{},
            }
        },
        methods:{
            // 加载仓库查询
            loadOrgans() {
                axios.get("/tIoms/" + this.currentPage + "/" + this.pageSize)
                    .then(res => {
                        this.ioms = res.data.records;
                        this.count = res.data.total;
                        // console.log(this.ioms);
                    })
            },

            loadWarehouse(){
                this.loadOrgans();
                // console.log(this.ioms);
                // console.log(this.date);
                    console.log(111);
                axios.get("/tIoms/" + this.currentPage + "/" + this.pageSize+"?wareName="+this.iom+"&deteTime="+this.date)
                    .then(res => {
                        this.ioms = res.data.records;
                        this.count = res.data.total;
                    })
            },
            dialog() {
                this.iom = {};
                this.dialogFormVisible = true;
                this.al = false;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadOrgans();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadOrgans();
            },
            handleEdit(index, row) {
                this.menu = row;
                this.flag = 1;
                this.dialogFormVisible = true;
            },
            // 删除仓库
            handleDelete(index, row) {
                if (this.ioms.length == 1) {
                    this.currentPage = this.currentPage - 1;
                }
                axios.delete("/tIom/" + row.id)
                    .then(res => {
                        if (res.data == "ok") {
                            this.loadOrgans();
                        }
                    });
            },

            save(){
                this.loadWarehouse();
            },
        },
        mounted() {
            this.loadOrgans();
        }
    });
</script>
</html>